
<template>
  <div class="finance-record-page">
    <h2>财务记录明细</h2>
    <!-- 
      <RewardFilter /> -->
   修改中
 <RewardFilter />
 <br>
 原图
 <RewardFilter2 />

    <!-- 财务表格组件 
    <NewTable 
      :tableHead="tableHeadConfig"  
      :tableData="financeRecords"   
      @clickFirst="handleTableAction" 
    />   -->
  </div>     
</template>

<script setup>
import NewTable from './components/NewTable.vue'; // 引入子组件
import RewardFilter from './components/RewardFilter.vue';
import { ref } from 'vue';
import RewardFilter2 from './components/RewardFilter2.vue';

// 1. 表格列配置 - 清晰定义每列的属性和交互
const tableHeadConfig = [
  {
    prop: 'id',
    label: '序号',
    width: 80
  },
  {
    prop: 'balanceType',
    label: '变更金额类型',
    width: 120,
    // 格式化显示文本（将枚举值转换为中文）
    format(row) {
      const typeMap = {
        'BALANCE': '资金池',
        'REBATE': '基础返利池',
        'JD_REBATE': '京东返利池'
      };
      return typeMap[row.balanceType] || '未知类型';
    }
  },
  {
    prop: 'changeAmount',
    label: '金额变更',
    width: 120
  },
  // 关键列：充值/扣减明细（可点击查看）
  {
    prop: 'financeDetail',
    label: '充值/扣减明细',
    width: 180,
    clickFinanceDetail: true,  // 标记：需要渲染"查看"链接
    showTip: false
  },
  {
    prop: 'dealTime',
    label: '处理时间',
    width: 180
  }
];

// 2. 模拟表格数据 - 贴近真实业务场景
const financeRecords = ref([
  {
    id: 1,
    balanceType: 'BALANCE',
    changeAmount: '+1000.00',
    financeDetail: '商户充值',
    dealTime: '2023-10-01 09:30:00',
    // 明细弹窗需要的额外数据（点击时会传递给父组件）
    detail: {
      orderNo: 'CZ20231001001',
      payType: '支付宝',
      status: '已到账'
    }
  },
  {
    id: 2,
    balanceType: 'REBATE',
    changeAmount: '-200.00',
    financeDetail: '订单扣减',
    dealTime: '2023-10-01 14:20:00',
    detail: {
      orderNo: 'KD20231001002',
      reason: '用户退款',
      status: '已完成'
    }
  }
]);

// 列表数据（示例）
const tableData = ref([
  { rewardType: '', rewardDetail: '' },
  // 其他行...
]);

// 接收子组件数据，更新列表字段
const updateTableFields = (data) => {
  // 示例：更新列表第一行数据（实际需根据业务场景，如"当前选中行"）
  if (tableData.value.length > 0) {
    tableData.value[0].rewardType = data.rewardType;
    tableData.value[0].rewardDetail = data.rewardDetail;
  }
};

// 3. 处理表格点击事件 - 根据类型执行不同逻辑
const handleTableAction = (rowData, actionType) => {
  // 区分点击类型（这里只处理"充值/扣减明细"的点击）
  if (actionType === 'financeDetail') {
    console.log('===== 查看明细 =====');
    console.log('当前行数据：', rowData);
    // 实际业务中可打开弹窗展示明细
    alert(`查看明细：${rowData.detail.orderNo} - ${rowData.detail.status}`);
  }
};
</script>

<style scoped>
.finance-record-page {
  padding: 20px;
}
</style>